const { default: styled } = require("styled-components");

const SongSheetWarrper = styled.div`
min-width: 640px;
.btns{
    display: flex;
    flex-wrap: wrap;
    .btn-item{
        margin: 0px 10px 10px 0;
        padding: 5px 35px;
        border-radius: 5px;
        background-color: rgb(225,225,225);
        color: black;
        cursor: pointer;
        &:hover{
            color:rgb(30,206,156);
            background-color: rgb(218,218,218);
        }
    }
    .active{
        color:rgb(30,206,156);
        background-color: rgb(218,218,218);
    }
}
h3{
    font-size: 30px;
    margin-bottom: 10px;
}
.main-items{
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    li{
        margin-bottom: 20px;
        margin-right: 10px;
    }
}
`

export default SongSheetWarrper